<template>
    <div>
        <div>
                <div style="display: flex;justify-content: space-between">
                    <div>
                        <el-input prefix-icon="el-icon-search" placeholder="请输入员工名搜索员工..." size="mini" class="searchStyle"
                                  v-model="keyword"
                                  @keydown.enter.native="initEmps" clearable @clear="initEmps" :disabled="showAdvanceSearchView"></el-input>
                        <el-button icon="el-icon-search" type="primary" size="mini" class="searchButtomStyle" @click="initEmps">
                            搜索
                        </el-button>
                        <el-button @click="showAdvanceSearchView=!showAdvanceSearchView" type="primary" size="mini" class="searchButtomStyle">
                            <i :class="showAdvanceSearchView?'fa fa-angle-double-up':'fa fa-angle-double-down'" aria-hidden="true"></i>
                            高级搜索
                        </el-button>
                    </div>
                    <div>
                        <el-upload
                                :before-upload="beforeUpload"
                                :on-success="onSuccess"
                                :on-error="onError"
                                :disabled="importDataDisabled"
                                :show-file-list="false"
                                style="display: inline-flex; margin-left: 8px"
                                action="/employee/basic/import">
                            <el-button :disabled="importDataDisabled" type="success" size="mini" class="searchButtomStyle" :icon="importDataBtnIcon">
                                {{importDataBtnText}}
                            </el-button>
                        </el-upload>
                        <el-button type="success" size="mini" class="searchButtomStyle" @click="exportData" icon="el-icon-download">
                            导出数据
                        </el-button>
                        <el-button icon="el-icon-plus" type="primary" size="mini" class="searchButtomStyle"
                                   @click="showAddEmpView">添加员工
                        </el-button>
                    </div>
                </div>
                <transition name="slide-fade">
                <div v-show="showAdvanceSearchView" style="border: 1px solid #1487ff; border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px">
                    <el-row>
                        <el-col :span="5">
                            政治面貌：
                            <el-select v-model="searchValue.politicId" placeholder="政治面貌" style="width: 150px" size="mini">
                                <el-option
                                        v-for="item in politicsstatus"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4">
                            民族：
                            <el-select v-model="searchValue.nationId" placeholder="民族" style="width: 130px" size="mini">
                                <el-option
                                        v-for="item in nations"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4">
                            职位：
                            <el-select v-model="searchValue.posId" placeholder="职位" style="width: 130px" size="mini">
                                <el-option
                                        v-for="item in positions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4">
                            职称：
                            <el-select v-model="searchValue.jobLevelId" placeholder="职称" style="width: 130px" size="mini">
                                <el-option
                                        v-for="item in joblevels"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="7">
                            聘用形式：
                            <el-radio-group label="聘用形式:" v-model="searchValue.engageForm" size="mini">
                                <el-radio label="劳动合同">劳动合同</el-radio>
                                <el-radio label="劳务合同" style="margin-left: -10px">劳务合同</el-radio>
                            </el-radio-group>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            所属部门:
                            <el-popover
                                    placement="right"
                                    title="请选择部门"
                                    width="200"
                                    trigger="manual"
                                    v-model="popVisble2">
                                <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                         @node-click="searchViewHandleNodeClick"></el-tree>
                                <div slot="reference"
                                     style="width: 130px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;margin-left: 3px"
                                     @click="showDepView2">{{inputDepName}}
                                </div>
                            </el-popover>
                        </el-col>
                        <el-col :span="10">
                            入职日期：
                            <el-date-picker
                                    v-model="searchValue.beginDateScope"
                                    size="mini"
                                    style="margin-top: 8px"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="5" :offset="4">
                            <el-button size="mini">取消</el-button>
                            <el-button size="mini" icon="el-icon-search" type="primary" @click="initEmps('advanced')">搜索</el-button>
                        </el-col>
                    </el-row>
                </div>
                </transition>
                <div style="margin-top: 10px">
                    <el-table
                            :data="emps"
                            size="mini"
                            stripe
                            border
                            v-loading="loading"
                            element-loading-text="正在加载..."
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.8)"
                            style="width: 100%">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                fixed
                                align="left"
                                label="姓名"
                                width="90">
                        </el-table-column>
                        <el-table-column
                                prop="workId"
                                label="工号"
                                align="left"
                                width="85">
                        </el-table-column>
                        <el-table-column
                                prop="gender"
                                label="性别"
                                align="left"
                                width="85">
                        </el-table-column>
                        <el-table-column
                                prop="birthday"
                                width="100"
                                align="left"
                                label="出生日期">
                        </el-table-column>
                        <el-table-column
                                prop="idCard"
                                width="150"
                                align="left"
                                label="身份证号码">
                        </el-table-column>
                        <el-table-column
                                prop="wedlock"
                                width="70"
                                label="婚姻状况">
                        </el-table-column>
                        <el-table-column
                                prop="nation.name"
                                width="50"
                                label="民族">
                        </el-table-column>
                        <el-table-column
                                prop="nativePlace"
                                width="80"
                                label="籍贯">
                        </el-table-column>
                        <el-table-column
                                prop="politicsstatus.name"
                                label="政治面貌">
                        </el-table-column>
                        <el-table-column
                                prop="email"
                                width="180"
                                align="left"
                                label="电子邮件">
                        </el-table-column>
                        <el-table-column
                                prop="phone"
                                width="100"
                                align="left"
                                label="电话号码">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                width="220"
                                align="left"
                                label="联系地址">
                        </el-table-column>
                        <el-table-column
                                prop="department.name"
                                width="100"
                                align="left"
                                label="所属部门">
                        </el-table-column>
                        <el-table-column
                                prop="position.name"
                                width="100"
                                label="职位">
                        </el-table-column>
                        <el-table-column
                                prop="jobLevel.name"
                                width="100"
                                label="职称">
                        </el-table-column>
                        <el-table-column
                                prop="engageForm"
                                width="100"
                                align="left"
                                label="聘用形式">
                        </el-table-column>
                        <el-table-column
                                prop="tiptopDegree"
                                width="80"
                                align="left"
                                label="最高学历">
                        </el-table-column>
                        <el-table-column
                                prop="specialty"
                                width="150"
                                align="left"
                                label="专业">
                        </el-table-column>
                        <el-table-column
                                prop="school"
                                width="130"
                                align="left"
                                label="院校">
                        </el-table-column>
                        <el-table-column
                                prop="beginDate"
                                width="100"
                                align="left"
                                label="入职日期">
                        </el-table-column>
                        <el-table-column
                                prop="conversionTime"
                                width="100"
                                align="left"
                                label="转正日期">
                        </el-table-column>
                        <el-table-column
                                prop="beginContract"
                                width="95"
                                align="left"
                                label="合同起始日期">
                        </el-table-column>
                        <el-table-column
                                prop="endContract"
                                width="95"
                                align="left"
                                label="合同终止日期">
                        </el-table-column>
                        <el-table-column
                                prop="contractTerm"
                                width="70"
                                align="left"
                                label="合同期限">
                        </el-table-column>

                        <el-table-column
                                width="300"
                                fixed="right"
                                label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="showEditView(scope.row)">编辑</el-button>
                                <el-button size="mini" type="primary">查看高级资料</el-button>
                                <el-button size="mini" type="danger" @click="deleteEmp(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>


                    </el-table>
                    <div style="display: flex;justify-content: flex-end">
                        <el-pagination
                                @current-change="currentChange"
                                background
                                layout="sizes, prev, pager, next, jumper, ->, total, slot"
                                @size-change="sizeChange"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <div>
                <el-form :model="emp" :rules="rules" ref="empForm">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="姓名:" prop="name" size="mini">
                                <el-input prefix-icon="el-icon-edit" v-model="emp.name" placeholder="请输入员工姓名"
                                          size="mini" style="width: 150px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="性别:" prop="gender" size="mini">
                                <el-radio-group label="性别:" v-model="emp.gender" size="mini">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女" style="margin-left: -10px">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="出生日期:" prop="birthday" size="mini">
                                <el-date-picker
                                        v-model="emp.birthday"
                                        size="mini"
                                        value-format="yyyy-MM-dd"
                                        style="width: 150px"
                                        type="date"
                                        placeholder="出生日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="政治面貌:" prop="politicId" size="mini">
                                <el-select v-model="emp.politicId" placeholder="政治面貌" style="width: 200px">
                                    <el-option
                                            v-for="item in politicsstatus"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="民族:" prop="nationId" size="mini">
                                <el-select v-model="emp.nationId" placeholder="民族" style="width: 150px">
                                    <el-option
                                            v-for="item in nations"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="籍贯:" prop="nativePlace" size="mini">
                                <el-input prefix-icon="el-icon-edit" v-model="emp.nativePlace" placeholder="籍贯"
                                          size="mini" style="width: 130px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="电子邮箱:" prop="email" size="mini">
                                <el-input prefix-icon="el-icon-message" v-model="emp.email" placeholder="电子邮箱"
                                          size="mini" style="width: 150px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="联系地址:" prop="address" size="mini">
                                <el-input prefix-icon="el-icon-edit" v-model="emp.address" placeholder="联系地址"
                                          size="mini" style="width: 200px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="职称:" prop="jobLevelId" size="mini">
                                <el-select v-model="emp.jobLevelId" placeholder="职称" style="width: 150px">
                                    <el-option
                                            v-for="item in joblevels"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="职位:" prop="posId" size="mini">
                                <el-select v-model="emp.posId" placeholder="职位" style="width: 130px">
                                    <el-option
                                            v-for="item in positions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="所属部门:" prop="departmentId" size="mini">
                                <Dep-choose :department.sync="emp.department" :departmentId.sync="emp.departmentId"></Dep-choose>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="电话号码:" prop="phone" size="mini">
                                <el-input prefix-icon="el-icon-phone" v-model="emp.phone" placeholder="电话号码" size="mini"
                                          style="width: 200px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="工号:" prop="workId" size="mini">
                                <el-input disabled v-model="emp.workId" placeholder="工号" size="mini"
                                          style="width: 150px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="学历:" prop="tiptopDegree" size="mini">
                                <el-select v-model="emp.tiptopDegree" placeholder="学历" style="width: 130px">
                                    <el-option
                                            v-for="item in tiptopDegrees"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="毕业院校:" prop="school" size="mini">
                                <el-input prefix-icon="el-icon-school" v-model="emp.school" placeholder="毕业院校"
                                          size="mini" style="width: 150px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="专业名称:" prop="specialty" size="mini">
                                <el-input prefix-icon="el-icon-edit" v-model="emp.specialty" placeholder="专业名称"
                                          size="mini" style="width: 200px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="入职日期:" prop="beginDate" size="mini">
                                <el-date-picker
                                        v-model="emp.beginDate"
                                        size="mini"
                                        value-format="yyyy-MM-dd"
                                        style="width: 150px"
                                        type="date"
                                        placeholder="入职日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="转正日期:" prop="conversionTime" size="mini">
                                <el-date-picker
                                        v-model="emp.conversionTime"
                                        size="mini"
                                        value-format="yyyy-MM-dd"
                                        style="width: 150px"
                                        type="date"
                                        placeholder="转正日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同起始日期:" prop="beginContract" size="mini">
                                <el-date-picker
                                        v-model="emp.beginContract"
                                        size="mini"
                                        value-format="yyyy-MM-dd"
                                        style="width: 150px"
                                        type="date"
                                        placeholder="合同起始日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同终止日期:" prop="endContract" size="mini">
                                <el-date-picker
                                        v-model="emp.endContract"
                                        size="mini"
                                        value-format="yyyy-MM-dd"
                                        style="width: 150px"
                                        type="date"
                                        placeholder="转正日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="身份证号码:" prop="idCard" size="mini">
                                <el-input prefix-icon="el-icon-edit" v-model="emp.idCard" placeholder="身份证号码"
                                          size="mini" style="width: 200px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="聘用形式:" prop="engageForm" size="mini">
                                <el-radio-group label="聘用形式:" v-model="emp.engageForm" size="mini">
                                    <el-radio label="劳动合同">劳动合同</el-radio>
                                    <el-radio label="劳务合同" style="margin-left: -10px">劳务合同</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="婚姻状况:" prop="wedlock" size="mini">
                                <el-radio-group label="婚姻状况:" v-model="emp.wedlock" size="mini">
                                    <el-radio label="已婚">已婚</el-radio>
                                    <el-radio label="未婚" style="margin-left: -10px">未婚</el-radio>
                                    <el-radio label="离异" style="margin-left: -10px">离异</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="doAddEmp">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    // 1.引入组件
    import DepChoose from "../../components/emp/DepChoose";
    export default {
        name: "EmpBasic",
        data() {
            return {
                searchValue: {
                    politicId: null,
                    nationId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: null,
                    departmentId: null,
                    beginDateScope: null
                },
                importDataBtnText:'导入数据',
                importDataBtnIcon:'el-icon-upload2',
                importDataDisabled:false,
                title: '',
                allDeps: [],
                showAdvanceSearchView:false,
                popVisble: false,
                popVisble2: false,
                emps: [],
                politicsstatus: [],
                nations: [],
                joblevels: [],
                positions: [],
                loading: false,
                dialogVisible: false,
                total: 0,
                page: 1,
                size: 10,
                keyword: '',
                inputDepName: '所属部门',
                tiptopDegrees: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其他'],
                emp: {
                    department:{
                        name:null,
                        id:null,
                    },
                    name: "javaboy",
                    gender: "男",
                    birthday: "1989-12-31",
                    idCard: "610122199001011256",
                    wedlock: "已婚",
                    nationId: 1,
                    nativePlace: "陕西",
                    politicId: 13,
                    email: "laowang@qq.com",
                    phone: "18565558897",
                    address: "深圳市南山区",
                    departmentId: null,
                    jobLevelId: 9,
                    posId: 29,
                    engageForm: "劳务合同",
                    tiptopDegree: "本科",
                    specialty: "信息管理与信息系统",
                    school: "深圳大学",
                    beginDate: "2017-12-31",
                    workState: "在职",
                    workID: "00000057",
                    contractTerm: 2,
                    conversionTime: "2018-03-31",
                    notworkDate: null,
                    beginContract: "2017-12-31",
                    endContract: "2019-12-31",
                    workAge: null
                },
                defaultProps: {
                    children: 'children',
                    label: 'name',
                },
                rules: {
                    name: [{required: true, message: '必填：用户名', trigger: 'blur'}],
                    gender: [{required: true, message: '请选择性别', trigger: 'blur'}],
                    birthday: [{required: true, message: '必填：生日日期', trigger: 'blur'}],
                    idCard: [{
                        required: true,
                        message: '必填：身份证号',
                        trigger: 'blur'
                    }, {
                        pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                        message: '身份证号码格式有误',
                        trigger: blur
                    }],
                    nationId: [{required: true, message: '请选择民族', trigger: 'blur'}],
                    nativePlace: [{required: true, message: '必填：籍贯', trigger: 'blur'}],
                    wedlock: [{required: true, message: '请选择婚姻状况', trigger: 'blur'}],
                    email: [{required: true, message: '必填：邮箱', trigger: 'blur'}, {
                        type: 'email',
                        message: '邮箱格式不正确',
                        trigger: 'blur'
                    }],
                    phone: [{required: true, message: '必填：联系电话', trigger: 'blur'}],
                    address: [{required: true, message: '必填：住址', trigger: 'blur'}],
                    departmentId: [{required: true, message: '请选择所属部门', trigger: 'blur'}],
                    jobLevelId: [{required: true, message: '请选择职位', trigger: 'blur'}],
                    posId: [{required: true, message: '请选择职称', trigger: 'blur'}],
                    engageForm: [{required: true, message: '请选择聘用形式', trigger: 'blur'}],
                    tiptopDegree: [{required: true, message: '请选择最高学历', trigger: 'blur'}],
                    specialty: [{required: true, message: '必填：专业名', trigger: 'blur'}],
                    school: [{required: true, message: '必填：学校名', trigger: 'blur'}],
                    beginDate: [{required: true, message: '请选择入职日期', trigger: 'blur'}],
                    conversionTime: [{required: true, message: '请选择转正日期', trigger: 'blur'}],
                    beginContract: [{required: true, message: '请选择合同起始日期', trigger: 'blur'}],
                    endContract: [{required: true, message: '请选择合同终止日期', trigger: 'blur'}],
                    workAge: [{required: true, message: '请输入工龄', trigger: 'blur'}],
                }
            }
        },
        mounted() {
            this.initEmps();
            this.initData();
            this.initPositions();
        },
        // 注册组件
        components:{
          DepChoose
        },
        methods: {
            searchViewHandleNodeClick(data){
                this.inputDepName = data.name;
                this.searchValue.departmentId = data.id;
                this.popVisible2 = !this.popVisible2
            },
            onSuccess(response,file,fileList){
                this.importDataBtnText='导入数据';
                this.importDataBtnIcon='el-icon-upload2';
                this.importDataDisabled=false;
                this.initEmps();
            },
            onError(err,file,fileList){
                this.importDataBtnText='正在导入';
                this.importDataBtnIcon='el-icon-loading';
                this.importDataDisabled=false;
            },
            beforeUpload(){
                this.importDataBtnText='正在导入';
                this.importDataBtnIcon='el-icon-loading';
                this.importDataDisabled=true;
            },
            exportData(){
                window.open('/employee/basic/export','_parent')
            },
            emptyEmp(){
                    this.emp = {
                        department:{
                            id: null,
                            name:null,
                        },
                        name: "",
                        gender: "",
                        birthday: "",
                        idCard: "",
                        wedlock: "",
                        nationId: 1,
                        nativePlace: "",
                        politicId: 13,
                        email: "",
                        phone: "",
                        address: "",
                        departmentId: null,
                        jobLevelId: 9,
                        posId: 29,
                        engageForm: "",
                        tiptopDegree: "",
                        specialty: "",
                        school: "",
                        beginDate: "",
                        workID: "",
                        contractTerm: 2,
                        conversionTime: "",
                        notworkDate: null,
                        beginContract: "",
                        endContract: "",
                        workAge: null,
                    }
                    this.inputDepName = '';
            },
            showEditView(data) {
                this.initPositions();
                this.title = '编辑员工信息';
                this.emp = data;
                this.inputDepName=data.department.name;
                this.dialogVisible = true;
            },
            deleteEmp(data) {
                this.$confirm('是否删除【' + data.name + '】员工？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.deleteRequest("/employee/basic/" + data.id).then(resp => {
                        if (resp) {
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            doAddEmp() {
                if (this.emp.id) {
                    this.$refs['empForm'].validate(vaild => {
                        if (vaild) {
                            this.putRequest("/employee/basic/", this.emp).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        }
                    })
                } else {
                    this.$refs['empForm'].validate(vaild => {
                        if (vaild) {
                            this.postRequest("/employee/basic/", this.emp).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        }
                    })
                }
            },

            showDepView() {
                this.popVisble = !this.popVisble;
                this.initData();
            },
            showDepView2() {
                this.popVisble2 = !this.popVisble2;
                this.initData();
            },
            getWorkId() {
                this.getRequest("/employee/basic/workId").then(resp => {
                    if (resp) {
                        this.emp.workId = resp.obj;
                    }
                })
            },
            initPositions() {
                this.getRequest("/employee/basic/positions/").then(resp => {
                    if (resp) {
                        this.positions = resp;
                    }
                })
            },
            initData() {
                if (!window.sessionStorage.getItem("nations")) {
                    this.getRequest('/employee/basic/nations').then(resp => {
                        if (resp) {
                            this.nations = resp;
                            window.sessionStorage.setItem("nations", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.nations = JSON.parse(window.sessionStorage.getItem("nations"));
                }
                if (!window.sessionStorage.getItem("joblevels")) {
                    this.getRequest('/employee/basic/joblevels').then(resp => {
                        if (resp) {
                            this.joblevels = resp;
                            window.sessionStorage.setItem("joblevels", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.joblevels = JSON.parse(window.sessionStorage.getItem("joblevels"));
                }
                if (!window.sessionStorage.getItem("politicsstatus")) {
                    this.getRequest('/employee/basic/politicsstatus').then(resp => {
                        if (resp) {
                            this.politicsstatus = resp;
                            window.sessionStorage.setItem("politicsstatus", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.politicsstatus = JSON.parse(window.sessionStorage.getItem("politicsstatus"));
                }
                if (!window.sessionStorage.getItem("departments")) {
                    this.getRequest('/employee/basic/departments').then(resp => {
                        if (resp) {
                            this.allDeps = resp;
                            window.sessionStorage.setItem("departments", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.allDeps = JSON.parse(window.sessionStorage.getItem("departments"));
                }
            },
            showAddEmpView() {
                this.emptyEmp();
                this.title = '添加员工';
                this.getWorkId();
                this.dialogVisible = true;
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initEmps();
            },
            currentChange(currentPage) {
                this.page = currentPage;
                this.initEmps('advanced');
            },
            initEmps(type) {
                this.loading = true;
                let url = '/employee/basic/?page=' + this.page + '&size=' + this.size;
                if (type && type == 'advanced') {
                    if (this.searchValue.politicId) {
                        url += '&politicId=' + this.searchValue.politicId;
                    }
                    if (this.searchValue.nationId) {
                        url += '&nationId=' + this.searchValue.nationId;
                    }
                    if (this.searchValue.jobLevelId) {
                        url += '&jobLevelId=' + this.searchValue.jobLevelId;
                    }
                    if (this.searchValue.posId) {
                        url += '&posId=' + this.searchValue.posId;
                    }
                    if (this.searchValue.engageForm) {
                        url += '&engageForm=' + this.searchValue.engageForm;
                    }
                    if (this.searchValue.departmentId) {
                        url += '&departmentId=' + this.searchValue.departmentId;
                    }
                    if (this.searchValue.beginDateScope) {
                        url += '&beginDateScope=' + this.searchValue.beginDateScope;
                    }
                } else {
                    url += "&name=" + this.keyword;
                }
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.emps = resp.data;
                        this.total = resp.total;
                    }
                });
            }
        }
    }
</script>

<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
    .searchStyle {
        width: 300px;
        margin-top: 10px;
    }
    .searchButtomStyle {
        margin-left: 10px;
    }


</style>